<template>
  <div class="production clearfix">
    <div class="arrange fl">
      <ul>
        <li>部品番号：</li>
        <li>计划数量：</li>
        <li>当前数量：</li>
        <li>目标SPM：</li>
        <li>当前SPM：</li>
      </ul>
    </div>
    <div class="efficiency fl">
      <div class="formula">
        <div class="cause">
          计算目标值
        </div>
        <div class="present">
          实际当前值
        </div>
      </div>
    </div>
    <div class="progress">
      <el-progress :percentage="percentage" color="#67c23a"></el-progress>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      percentage: 20,
    };
  },
};
</script>

<style lang="less" scoped>
.production {
  width: 100%;
  .arrange {
    width: 50%;
    ul {
      margin: 0.5rem 0 0 0.2rem;
    }
    li {
      margin-bottom: 0.03rem;
      font-size: 0.14rem;
      color: #ef5350;
    }
  }
  .efficiency {
    width: 50%;
    position: relative;
    .formula {
      width: 80%;
      position: absolute;
      left: 0rem;
      top: 0.4rem;
      .cause {
        color: #ef5350;
        font-size: 0.2rem;
        padding: 0.1rem;
        border-bottom: 0.01rem solid #41b883;
      }
      .present {
        color: #ef5350;
        font-size: 0.2rem;
        padding: 0.1rem;
        border-top: 0.01rem solid #41b883;
      }
    }
  }
  .progress {
    width: 90%;
    margin: 0 auto;
  }
}
</style>
